<template>
   <el-card class="box-card">
    <div slot="header" class="clearfix">
    <h1 class="container-title fl">编辑用户</h1>
    </div>
    <!-- 在这里写数据 -->
    <ul class="ul">
      <li class="li"><p><font style="padding-left:20px">邮箱:</font><font>{{user.email}}</font>
    <el-popover
  placement="right"
  width="40"
  trigger="click">

    <el-input placeholder="请输入新的邮箱" v-model="email"></el-input>
    <el-input placeholder="输入密码" v-model="password"></el-input>
    <el-button type="primary" @click="up_email" style="width:80px;">提交</el-button>
    

  <el-button slot="reference">修改</el-button>
</el-popover>

      </p></li>
      <li class="li"><p><font style="padding-left:20px">密码:</font><font>已设置</font>
        <el-popover
  placement="right"
  width="40"
  trigger="click"
  style="padding-left:90px"
  >

    <el-input placeholder="新密码" v-model="newpassword"></el-input>
    <el-input placeholder="确认新密码" v-model="renewpassword"></el-input>
    <el-input placeholder="原密码" v-model="password"></el-input>
    <el-button type="primary" @click="up_password" style="width:80px;">提交</el-button>
    

  <el-button slot="reference">修改</el-button>
</el-popover>
  </p></li>
      <li class="li"><p><font style="padding-left:8px">用户名:</font><font>{{user.username}}</font></p></li>
      <li class="li"><p>电话号码:<font>{{user.phone}}</font>
  <el-popover
  placement="right"
  width="40"
  trigger="click"
  style="padding-left:40px"
  >

    <el-input placeholder="输入新的手机号" v-model="phone"></el-input>
    <el-button type="primary" @click="up_phone" style="width:80px;">提交</el-button>
    

  <el-button slot="reference">修改</el-button>
</el-popover>

      </p></li>
      <li class="li"><p><font style="padding-left:20px">权限:</font><font>{{user.role}}</font></p></li>
    </ul>

</el-card>
       
    </template>
    
    <script>
      import {one,upemail,upword,upphone} from '../api/api'
    
        export default {
    
            data(){
                return {
                    msg:'你好，这里是首页',
                    email:'',
                    password:'',
                    newpassword:'',
                    renewpassword:'',
                    phone:'',
                    user:''

                    
                        
                }
            },
            //定义组建标签
            components:{
            },
            filters: {
     
　　},
            //自定义方法
            methods:{
                   show_user(){
                    var params={'username':localStorage.getItem('username')}
                one(params).then( res => {
                  this.user=res
                  
         
              })
    
          },
          //修改邮箱
          up_email:function(){
          var remail=/^[\w\-\.]+@[a-z0-9]+(\-[a-z0-9]+)?(\.[a-z0-9]+(\-[a-z0-9]+)?)*\.[a-z]{2,4}$/i;
          if(remail.test(this.email)==false){
              this.$Message('请输入正确的邮箱地址')
              return false;

            }
            var params={'username':localStorage.getItem('username'),'email':this.email,'password':this.password}
            upemail(params).then( res => {
                  if(res.code==200){
                     this.$Message(res.message)
                  }else {
                    this.$Message(res.message)
                  }
                  
         
              })

          },
          //修改密码
          up_password:function(){
          if(this.newpassword!=this.renewpassword){
          this.$Message('两次密码不一致')
          return false;

        }
         var params={'username':localStorage.getItem('username'),'newpassword':this.newpassword,'password':this.password}
            upword(params).then( res => {
                   if(res.code==200){
                     this.$Message(res.message)
                  }else {
                    this.$Message(res.message)
                  }
                  
                  
         
              })

          },
          //修改手机号
          up_phone:function(){
            var params={'username':localStorage.getItem('username'),'phone':this.phone}
            upphone(params).then( res => {
                  this.$Message(res.message)
                  
         
              })


          }
    
            },
            //钩子方法
            mounted:function(){
              this.show_user()
    
            },
            //监听属性
            watch:{
    
    
            },
            //计算属性
            computed:{
    
    
            }
    
    
    
        }
    
    
    </script>
    
    <style>
    font{
      padding-left:100px;
    }
    .ul{
      width:400px;
      height:400px;
      margin-left:350px;
      margin-top:200px;

    }
    .li {
            border: solid 1px black;
            line-height:25px;
            height:60px;



        }
 .box-card-min{
    height:450px;
    width:450px;
 
    margin:0 auto;
    margin-top:30px;
    
 }
  .box-card{
        
         height:650px;

    }
    
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .container-title {
    font-size: 20px;
    line-height: 32px;
    font-weight: normal;
    color: #39486c;
  }
  .fl {
    float: left;
  }
  .inp-box {
    font-size: 16px;
    line-height: 32px;
    margin-left: 30px;
}
 
 
  .login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }
  .add-form {
    padding: 0;
    margin-bottom: 100px;
}

    </style>